<template>
  <div id="app">
		<div style="width: 700px">
			<a-button type="primary" @click="handleClick">赋值</a-button>
			<br></br>
			<a-row :gutter="[20, 20]">
				<a-col :span="12">
					<h3>分页-单选</h3>
					<select-paging v-model="form.baseValue" @change="change" />
				</a-col>
				<a-col :span="12">
					<h3>分页-多选</h3>
					<select-paging v-model="form.multipleValue" mode="multiple" @change="change" />
				</a-col>
			</a-row>
			<a-row :gutter="[20, 20]">
				<a-col :span="12">
					<h3>模糊搜索-单选</h3>
					<select-paging v-model="form.searchValue" :showSearch="true" @change="change" />
				</a-col>
				<a-col :span="12">
					<h3>模糊搜索-多选</h3>
					<select-paging v-model="form.searchValueMultiple" :showSearch="true" mode="multiple" @change="change" />
				</a-col>
			</a-row>
			<a-row :gutter="[20, 20]">
				<a-col :span="12">
					<h3>支持自定义输入的值-单选</h3>
					<select-paging v-model="form.customValue" :isCustomInput="true" :showSearch="true" @change="change" />
				</a-col>
				<a-col :span="12">
					<h3>支持自定义输入的值-多选(按回车确定)</h3>
					<select-paging v-model="form.customValueMultiple" :isCustomInput="true" :showSearch="true" mode="multiple"  @change="change" />
				</a-col>
			</a-row>
			<a-row :gutter="[20, 20]">
				<a-col :span="12">
					<h3>滚动加载</h3>
					<select-paging v-model="form.scrollValue" loadType="scroll" :pagination="{ pageSize: 10 }" @change="change" />
				</a-col>
			</a-row>
			<br></br>
			<a-button type="danger" @click="confirm">结果</a-button>
		</div>
  </div>
</template>

<script>
import SelectPaging from './components/SelectPaging.vue'

export default {
  name: 'App',
  components: {
		SelectPaging
  },
	data() {
		return {
			form: {
				baseValue: undefined,
				multipleValue: [],
				searchValue: undefined,
				searchValueMultiple: [],
				customValue: undefined,
				customValueMultiple: [],
				scrollValue: undefined,
			}
		}
	},
	methods: {
		handleClick() {
			setTimeout(() => {
				this.form.baseValue = '小黑'
				this.form.multipleValue = ['小橙', '小黑']
			}, 500)
		},
		change(selectedValue, options) {
			console.log(selectedValue, options)
		},
		confirm() {
			console.log('form', this.form)
		}
	}
}
</script>

<style>
#app {
	padding-top: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>

